<template>
	<view class="pages pt-20 pb-40">
		<!-- 总数据 -->
		<view class="pages-card ">
			<view class="">
				<text>按周</text><text class="fc-3 ml-10">2025.07.07~2025.07.13</text>
			</view>
			<view class="fc-0 mt-20 mb-20">
				省代理 | 山东省
			</view>
			<view class="">
				<text>区域业绩: </text><text class="fc-warn ml-10 mr-10">158.88W</text><text>分润比例: 1%</text>
			</view>
		</view>
		<!-- 门店业绩明细 -->
		<view class="pages-card  ">
			<view class="row-box ">
				<view class="flex">
					<text class="fc-3 fw-6">门店业绩明细</text>
				</view>
			</view>
			<view class="list-box">
				<view class="row-box pt-30 pb-30" :class="{'link':index!==(pageList.length-1)}"
					v-for="(item,index) in pageList" :key="index">
					<view class="left flex-1">
						<view class="">
							<text>按周</text><text class="fc-3 ml-10">2025.07.07~2025.07.13</text>
						</view>
						<view class="row-box mt-10 mb-20">
							<text class="fc-3">赞赞来客泰鸿大厦门店</text><text>门店业绩: <text class="fc-warn">15.88W </text></text>
						</view>
						<view class="align-items-center">
							<u-icon name="map-fill" color="#00A191" size="16"></u-icon>
							<text>地址信息</text>
						</view>
					</view>
				</view>
			</view>

		</view>
		<view class="fc-9 fs-sm mt-20" style="text-align: center;">
			赞赞来客 | 提供技术支持
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				timeIndex: 0,
				startTime: '',
				endTime: '',
				pageList: [1, 2, 3, 4]
			};
		},
		onLoad() {},
		methods: {
			changeTime(index) {
				this.timeIndex = index
			},
			getStartTime(e) {
				this.startTime = e.detail.value
			},
			getEndTime(e) {
				this.endTime = e.detail.value
			},
		},
		computed: {
			timeList() {
				return [{
						title: '今日',
						value: 1
					},
					{
						title: '昨日',
						value: 2
					},
					{
						title: '本周',
						value: 3
					},
					{
						title: '上周',
						value: 4
					},
					{
						title: '本月',
						value: 5
					},
					{
						title: '上月',
						value: 6
					},
					{
						title: '全部',
						value: 7
					},
					{
						title: '自定义',
						value: 8
					},
				]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pages {
		position: relative;
	}

	.time-list {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		grid-gap: 10rpx;
		margin: 20rpx 0;

		.time-item {
			text-align: center;
			height: 64rpx;
			line-height: 64rpx;
			background: #F4F4F4;
			border-radius: 8rpx;
		}

		.ac-time-item {
			background: #E8FFFC;
			color: #00A191;
		}


	}

	.time-box {
		width: 300rpx;
		height: 64rpx;
		border-radius: 8rpx;
		border: 2rpx solid #00A191;
	}

	.link {
		border-bottom: 1px solid #e0e0e0;
	}
</style>